@import "../../variable.less";
.@{prefix} {
  &-sender {
    width: 100%;
    border-radius: 12px;
    position: relative;
    display: flex;
    flex-flow: column;
    .slide-enter-active , .slide-leave-active {
      transition: all 0.3s;
    }
    .slide-enter-from , .slide-leave-to {
      opacity: 0;
      max-height: 0px;
    }
    &-image-box {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      height: 100%;
      padding: 12px;
      overflow: auto;
    }
    &-file {
      width: 236px;
      padding: 12px;
      height: 68px;
      box-sizing: border-box;
      position: relative;
      background-color: #f3f3f3;
      border-radius: 4px;
      &:hover {
        .close-icon {
          opacity: 1;
        }
      }
      .file-wrap {
        width: 100%;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        .file-logo {
          .@{prefix}-icon {
            font-size: 32px;
            padding-top: 6px;
            color: rgb(34, 179, 94);
          }
        }
        .file-content {
          display: flex;
          flex-flow: column;
          font-size: 14px;
          width: 100%;
          overflow: hidden;
          .file-name {
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .file-size {
            color: #999;
          }
        }
      }
    }
    .percent {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50% , -50%);
      z-index: 2;
      color: #1677ff;
      font-size: 14px;
    }
    .close-icon {
      position: absolute;
      top: -0.5em;
      right: -0.5em;
      user-select: none;
      z-index: 1;
      cursor: pointer;
      color: #666;
      transition: all 0.3s;
      opacity: 0;
      &:hover {
        color: #000;
      }
    }
    &-image {
      width: 68px;
      height: 68px;
      position: relative;
      &:hover {
        .close-icon {
          opacity: 1;
        }
      }
      .ant-image {
        height: 100%;
        width: 100%;
        img {
          height: 100%;
          object-fit: cover;
        }
      }
      &.upload-btn {
        border: 1px dashed #d8d8d8;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        cursor: pointer;
        .@{prefix}-upload-file {
          line-height: 1;
        }
        .plus-icon {
          font-size: 28px;
          line-height: 1;
          color: #999;
          transition: all 0.3s;
        }
        &:hover {
          border-color: #1677ff;
          .plus-icon {
            color: #1677ff;
          }
        }
      }
    }
    &-prefix {
      display: flex;
      align-items: center;
    }
    &-upload {
      display: flex;
      flex-flow: column;
      gap: 10px;
      align-items: center;
      padding: 12px;
      &-icon {
        font-size: 60px;
      }
      &-btn.ant-btn {
        border-radius: 8px;
      }
    }
    &-header {
      position: absolute;
      bottom: calc(100% - 1px);
      left: 0;
      width: 100%;
      max-height: 240px;
      border: 1px solid #d8d8d8;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      box-sizing: border-box;
      border-color: #1677ff;
      border-bottom-color: #d8d8d8;
      background-color: #fff;
      overflow: hidden;
      transition: all 0.3s;
      z-index: 1;
      &-inner {
        height: 100%;
        max-height: 240px;
        overflow: hidden;
        display: flex;
        flex-flow: column;
      }
      &-title {
        font-size: 14px;
        background-color: #f3f3f3;
        display: flex;
        align-items: center;
        padding: 0 12px;
        line-height: 40px;
      }
    }
    
    &-actions {
      display: flex;
      gap: 10px;
    }
    &-content {
      display: flex;
      gap: 10px;
      padding: 12px;
      align-items: flex-end;
      transition: all 0.24s;
      border-radius: 12px;
      background-color: #fff;
      flex: 1;
      border: 1px solid #d8d8d8;
      z-index: 1;
      &:focus-within {
        border-color: #1677ff;
      }
      &.file {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-color: #1677ff;
      }
      &.focus {
        border-color: #1677ff;
      }
    }
    &-link-button.ant-btn {
      width: 32px;
      height: 32px;
      padding: 0;
      border: none;
      box-shadow: none;
      outline: none;
      &::after {
        content: none;
      }
      &:hover {
        background-color: #e8e8e8;
      }
      &:active {
        background-color: #d8d8d8;
      }
      .@{prefix}-icon {
        font-size: var(--font-size-medium);
      }
    }
    &-speech-button.ant-btn {
      width: 32px;
      height: 32px;
      padding: 0;
      border: none;
      box-shadow: none;
      outline: none;
      &::after {
        content: none;
      }
      &:hover {
        background-color: #e8e8e8;
      }
      &:active {
        background-color: #d8d8d8;
      }
      .@{prefix}-icon {
        color: #1677ff;
        font-size: var(--font-size-medium);
      }
    }
    &-speech-loading-button.ant-btn {
      width: 32px;
      height: 32px;
      padding: 0;
      border: none;
      box-shadow: none;
      outline: none;
      &::after {
        content: none;
      }
      &:hover {
        background-color: #e8e8e8;
      }
      &:active {
        background-color: #d8d8d8;
      }
      .@{prefix}-icon {
        color: #1677ff;
        font-size: var(--font-size-medium);
      }
    }
    &-button.ant-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      padding: 0;
      border: none;
      box-shadow: none;
      .@{prefix}-icon {
        color: #fff;
        font-size: var(--font-size-medium);
      }
      &[disabled] {
        background-color: #1677ff;
        opacity: 0.5;
        &:hover {
          opacity: 0.4;
           background-color: #1677ff;
        }
      }
    }
    &-loading-button.ant-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      padding: 0;
      box-shadow: none;
      border: none;
      .@{prefix}-icon {
        color: #1677ff;
        font-size: var(--font-size-medium);
        .loading-icon {
          width: 32px;
          height: 32px;
        }
      }
    }
    &-text {
      flex: 1;
      resize: none;
      border: none;
      outline: none;
      transition: all 0.24s;
      min-height: auto;
      align-self: center;
      padding: 0;
      overflow-y: hidden;
    }
  }
}